//样式重置
* {
  box-sizing: border-box;
  outline: none;
}

html {
  font-size: 13px;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2rem;
  background: #f1f1f1;
}

a {
  color: #999;
}
p {
  line-height: 1.5rem;
}

//定义颜色变量
$colors: (
  "primary": #db9e3f,
  "white": #fff,
  "white-1": #fcfcfc,
  "white-2": #eceef0,
  "light": #f9f9f9,
  "grey": #999,
  "dark-1": #343440,
  "dark-2": #4d4e51,
  "dark-3": #a2a2a2,
  "dark": #333,
  "black": #000,
  "light-3": #f5f5f5,
  "light-1": #d4d9de,
  "light-2": #e4e4e4,
  "blue": #1f3695,
  "blue-1": #00ADFF,
  "danger": #791a16,
  "gray-1": #23241f,
  "top": #161826
);
//遍历生成字体颜色，背景颜色工具类
@each $colorKey,
$color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }

  .bg-#{$colorKey} {
    background: $color;
  }
}

//文本对齐方式工具类
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var;
  }
}

//定义字体大小
$base-font-size: 1rem;
$font-sizes: (
  xxs: 0.6154, //8px
  xs: 0.7692, //10px
  sm: 0.9231, //12px
  md: 1, //13px
  lg: 1.0769, //14px
  xl: 1.2308 //16px
);

//遍历生成文本大小尺寸工具类
@each $sizeKey,
$size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $size*$base-font-size;
  }
}
//文本溢出显示省略号
.text-ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//定义flex布局
.d-flex {
  display: flex;
}

//生成定义主轴方向的类(flex-direction)
.flex-column {
  flex-direction: column //主轴为垂直方向
}

//定义在主轴上的对齐方式(justify-content)
$flex-jc: (
  start :flex-start, //左对齐
  end :flex-end, //右对齐
  center :center, //居中
  between :space-between, //两端对齐，之间的间隔都相等
  around :space-around //每个项目两侧的间隔相等(项目之间的间隔比项目与边框的间隔大一倍)
);

//遍历生成主轴上的对齐方式工具类
@each $key,
$value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

//定义在交叉轴上的对齐方式(align-items)
$flex-ai: (start :flex-start, //左对齐
  end :flex-end, //右对齐
  center :center, //居中
  baseline: baseline, //项目的第一行文字的基线对齐
  stretch: stretch //如果项目未设置高度或设为auto，将占满整个容器的高度
);

//遍历生成交叉轴上的对齐方式工具类
@each $key,
$value in $flex-jc {
  .ai-#{$key} {
    align-items: $value;
  }
}

//定义项目的放大比例
.flex-grow-1 {
  flex-grow: 1; //(flex: 1;一样的效果)
}
.flex-1 {
  flex: 1;
}

//生成flex是否换行类
.flex-warp {
  flex-wrap: wrap //换行
}

//网页边距（margin，padding）
$spacing-types: (m: margin, p: padding);
$spacing-directions: (t: top, r: right, b: bottom, l: left);
$spacing-base-size: 1rem; //基本大小
$spacing-sizes: (0: 0, 1: 0.25, 2: 0.5, 3: 1, 4: 1.5, 5: 3); //基本大小的倍数

//生成内外边距工具类
@each $typeKey,
$type in $spacing-types {

  //.m-1(只有margin的数值)
  @each $sizeKey,
  $size in $spacing-sizes {
    .#{$typeKey}-#{$sizeKey} {
      #{$type}: $size*$spacing-base-size
    }
  }

  //mx-1
  @each $sizeKey,
  $size in $spacing-sizes {

    //左右
    .#{$typeKey}x-#{$sizeKey} {
      #{$type}-left: $size*$spacing-base-size;
      #{$type}-right: $size*$spacing-base-size
    }

    //上下
    .#{$typeKey}y-#{$sizeKey} {
      #{$type}-top: $size*$spacing-base-size;
      #{$type}-bottom: $size*$spacing-base-size
    }
  }

  //带方位的（mt-1）
  @each $directionKey,
  $direction in $spacing-directions {

    @each $sizeKey,
    $size in $spacing-sizes {
      .#{$typeKey}#{$directionKey}-#{$sizeKey} {
        #{$type}-#{$direction}: $size*$spacing-base-size
      }
    }
  }
}

//button 
.btn {
  border: none;
  border-radius: 0.1538rem;
  font-size: map-get($font-sizes, 'sm')*$base-font-size; //map-get方法表示取前边定义好的类里的值
  padding: 0.3rem 0.6rem;
  &.btn-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      color: map-get($colors, 'primary');
      font-size: 1.5rem;
      margin-right: 0.5rem;
    }
    background: map-get($colors, 'white-1');
    border: 1px solid map-get($colors, 'white-2');
    padding: 0.8rem 1rem;
    font-size: 1rem;
  }
}

.w-100 {
  width: 100%;
}

//精灵图
.sprite {
  background: url(./assets/images/index.png) no-repeat 0 0;
  background-size: 28.8462rem; //375px
  display: inline-block;
  &.sprite-news {//爆料站
    width: 1.7692rem;
    height: 1.7692rem;
    background-position: 63.546% 15.517%;
  }
  &.sprite-tale {//故事站
    width: 1.7692rem;
    height: 1.7692rem;
    background-position: 90.483% 15.614%;
  }
  &.sprite-store {//周边商城
    width: 1.4615rem;
    height: 1.6923rem;
    background-position: 36.746% 0.924%;
  }
  &.sprite-experience {//体验服
    width: 1.5385rem;
    height: 1.6923rem;
    background-position: 10.408% 15.517%;
  }
  &.sprite-newMans {//新人专区
    width: 1.5385rem;
    height: 1.6154rem;
    background-position: 89.733% 1.266%;
  }
  &.sprite-inherit {//荣耀·传承
    width: 1.8462rem;
    height: 1.7692rem;
    background-position: 36.467% 15.287%;
  }
  &.sprite-simulate {//模拟战资料库
    width: 2.3846rem;
    height: 1.7692rem;
    background-position: 9.302% 0.813%;
  }
  &.sprite-campsite {//王者营地
    width: 1.8462rem;
    height: 1.7692rem;
    background-position: 63.3% 0.927%;
  }
  &.sprite-tencent {//公众号
    width: 1.8462rem;
    height: 1.7692rem;
    background-position: 0 96.207%;
  }
  &.sprite-versions {//版本介绍
    width: 1.7692rem;
    height: 1.7692rem;
    background-position: 63.546% 15.517%;
  }
  &.sprite-game {//对局环境
    width: 1.5385rem;
    height: 1.6154rem;
    background-position: 89.733% 1.266%;
  }
  &.sprite-infinite {//无限王者团
    width: 1.7692rem;
    height: 1.7692rem;
    background-position: 63.546% 15.517%;
  }
  &.sprite-creativity {//创意互动营
    width: 1.5385rem;
    height: 1.6923rem;
    background-position: 10.408% 15.517%;
  }
  &.sprite-pack {//收起前面的图标
    width: 0.7692rem;
    height: 0.7692rem;
    background-position: 38.577% 52.076%;
  }
}

//nav
.nav {
  display: flex;
  .nav-item {
    border-bottom: 3px solid transparent;
    padding-bottom: 0.3rem;
    &.active {
      color: map-get($colors, "primary");
      border-bottom: 3px solid map-get($colors, "primary");
    }
  }
  &.nav-inverse {
    .nav-item {
      color: map-get($colors, "white");
      &.active {
        border-bottom: 3px solid map-get($colors, "white");
      }
    }
  }
}